<template>
  <div class="chart">
    <div style="height: 200px; overflow-y: hidden">
      <el-scrollbar>
        <echart-div
          :options="chartData1"
          :height="chart1Height"
        />
      </el-scrollbar>
    </div>
    <el-row style="height: 320px; margin-top: -25px">
      <echartDiv :options="chartData2" :height="height" />
    </el-row>
  </div>
</template>

<script>
import echartDiv from '@/components/echart/index'

const getLinearColor = function (color1, color2, pos) {
  const p = Object.assign(
    { x: 0.5, y: 0, x2: 0.5, y2: 1 },
    pos
  )
  return {
    type: 'linear',
    ...p,
    colorStops: [
      {
        offset: 0,
        color: color1
      },
      {
        offset: 1,
        color: color2
      }
    ],
    global: false
  }
}
export default {
  components: {
    echartDiv
  },
  props: {
    // name,
    chartData1: {
      type: Object
    },
    chartData2: {
      type: Object
    },
    chart1Height: {
      type: Number
    }
  },
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['居住', '商业', '办公', '绿地', '水域'],
          axisTick: {
            show: false
            // 去除刻度
          },
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 40,
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          }
        },
        grid: {
          left: '0%',
          right: '1%',
          top: '0%',
          bottom: '0%',
          containLabel: true
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
            // 去除刻度
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            data: [170, 201, 150, 408, 97],
            type: 'bar',
            showBackground: true,
            barWidth: '30%',
            itemStyle: {
              normal: {
                color: '#00C8FF',
                // color: function(params) {
                //   // console.log(params, 'iparams111')
                //   var colorList = ['#00d988', '#ffffff', '#00d988', '#ffffff', '#00d988']
                //   return colorList[params.dataIndex]
                // },
                label: {
                  show: true,
                  position: 'top',
                  formatter: function (item) {
                    return item.data
                  },
                  // + '平方公里'
                  textStyle: {
                    fontSize: 12,
                    color: '#ffffff'
                    // color: function(params) {
                    //   // console.log(params,'==========')
                    //   var colorList = ['#00d988', '#ffffff', '#00d988', '#ffffff', '#00d988']
                    //   return colorList[params.dataIndex]
                    // }
                  }
                  // }
                }
              }
            },
            backgroundStyle: {
              color: 'rgba(255, 255, 255, 0.1)'
            }
          }
        ]
      },
      options: {
        legend: {
          orient: 'horizontal',
          bottom: 'bottom',
          itemWidth: 7,
          itemHeight: 7,
          x: '10%',
          // y: '73%',
          textStyle: {
            color: '#fff'
          },
          itemStyle: {
            borderType: 'solid'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['20%', '50%'],
            animation: false,
            label: {
              show: true,
              color: '#fff',
              position: 'top',
              formatter: function (item) {
                return item.value
              }
            },
            emphasis: {
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            labelLine: {
              show: true
            },
            data: [
              {
                value: 201,
                name: '商业',
                itemStyle: {
                  color: getLinearColor(
                    'rgba(202, 181, 35, 1)',
                    'rgba(253, 245, 191, 1)'
                  )
                }
              },
              {
                value: 150,
                name: '办公',
                itemStyle: {
                  color: getLinearColor(
                    'rgba(248, 151, 128, 1)',
                    'rgba(232, 231, 127, 1)'
                  )
                }
              },
              {
                value: 408,
                name: '绿地',
                itemStyle: {
                  color: getLinearColor(
                    'rgba(0, 220, 149, 1)',
                    'rgba(152, 255, 222, 1)'
                  )
                }
              },
              {
                value: 97,
                name: '水域',
                itemStyle: {
                  color: getLinearColor(
                    'rgba(49, 247, 245, 1)',
                    'rgba(7, 175, 253, 1)'
                  )
                }
              },
              {
                value: 170,
                name: '居住',
                itemStyle: {
                  color: getLinearColor(
                    'rgba(82, 105, 239, 1)',
                    'rgba(157, 171, 255, 1)'
                  )
                }
              }
            ]
          }
        ]
      },
      height: 250
    }
  },
  mounted() {
    // const echart = echarts.init(this.$refs.chart)
    // echart.setOption({
    //
    // })
    // window.addEventListener('resize', function() {
    //   echart.resize()
    // })
  }
}
</script>

<style lang="scss" scoped>
.size12 {
  font-size: 12px;
}

.background_image {
  height: 64px;
  line-height: 64px;
  padding-left: 16px;
  font-size: 14px;
  background-image: url('../../../../../public/img/basemaps/yjkb5.png');
}

.size16 {
  font-size: 16px;
  font-weight: 800;
  margin-left: 20px;
  margin-right: 4px;
}

.size14 {
  font-size: 14px;
  color: #d2e6f0;
}

.size8 {
  font-size: 8px;
  position: relative;
  top: -3px;
}

.left40 {
  margin-left: 40px !important;
}

.left13 {
  margin-left: 13px !important;
}

.sizeColor {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 2px;
}

.chart {
  margin-top: 14px;
}
</style>
